<template>
	<el-dialog v-model="props.show" width="500" close-icon="CloseBold" @close="close">
		<template #default>
			<el-tabs v-model="tabSelected" class="demo-tabs">
				<el-tab-pane label="申购" name="first">
					<div>
						<p class="mb-10px">期限</p>
						<el-scrollbar>
							<div class="w-full scrollbar-flex-content flex items-center mb-20px">
								<div v-for="(item, index) in termList" :key="index"
									class="pt-4px pb-4px pl-20px pr-20px mr-20px border-1px border-solid rounded-10px border-#E5E6EB cursor-pointer"
									:style="{ borderColor: termSelected == item.id ? '#000000' : '#E5E6EB' }"
									@click="termSelected = item.id">
									<p class="text-12px text-#000000 mb-6px">{{ item.timeDay }}</p>
									<p class="text-16px text-#07B175">{{ item.value }}</p>
								</div>
							</div>
						</el-scrollbar>
						<p class="mt-10px mb-10px">数量</p>
						<div class="flex items-center text-18px border-1px border-solid rounded-10px border-#E5E6EB p-10px">
							<el-input placeholder="最小可投0.22USDT">
							</el-input>
							<p class="mr-10px ml-10px">USDT</p>
							<p class="whitespace-nowrap text-#114CEE">最大</p>
						</div>
						<div class="mt-10px flex items-center text-12px">
							<span class="text-#86909C">可用：</span>
							<span class="ml-10px mr-10px">0.00USDT</span>
							<img src="/transaction/spot/add-blue-fill.svg" @click="showAccountDeposit = true" />
						</div>
						<div class="text-#86909C text-12px mt-10px">
							<p class="text-#000000 text-14px">申购数量限制</p>
							<div class="flex items-center justify-between mt-10px">
								<p>最小可投</p>
								<p>0.22 USDT</p>
							</div>
							<div class="flex items-center justify-between  mt-10px">
								<p>剩余可投</p>
								<p>0.22 USDT</p>
							</div>
						</div>
						<div class="text-#86909C text-12px mt-10px">
							<p class="text-#000000 text-14px">概览</p>
							<div class="p-20px bg-#F6F6F6 rounded-8px">
								<div class="h-100px">
									<el-steps direction="vertical" :active="4" class="step-financing-row">
										<el-step>
											<template #icon>
												<img src="/financing/step.svg" class="relative top--10px"/>
											</template>
											<template #title>
												<div class="flex items-center justify-between text-12px relative top--10px">
													<p class="text-#86909C">#86909C</p>
													<p class="text-#000000">2023-04-02 12:00</p>
												</div>
											</template>
										</el-step>
										<el-step>
											<template #icon>
												<img src="/financing/step.svg" class="relative top--10px"/>
											</template>
											<template #title>
												<div class="flex items-center justify-between text-12px relative top--10px">
													<p class="text-#86909C">#86909C</p>
													<p class="text-#000000">2023-04-02 12:00</p>
												</div>
											</template>
										</el-step>
										<el-step>
											<template #icon>
												<img src="/financing/step.svg" class="relative top--10px"/>
											</template>
											<template #title>
												<div class="flex items-center justify-between text-12px relative top--10px">
													<p class="text-#86909C">#86909C</p>
													<p class="text-#000000">2023-04-02 12:00</p>
												</div>
											</template>
										</el-step>
										<el-step>
											<template #icon>
												<img src="/financing/step.svg" class="relative top--10px"/>
											</template>
											<template #title>
												<div class="flex items-center justify-between text-12px relative top--10px">
													<p class="text-#86909C">#86909C</p>
													<p class="text-#000000">2023-04-02 12:00</p>
												</div>
											</template>
										</el-step>
									
									</el-steps>
								</div>
								<div class="flex items-center justify-between">
									<p>期限</p>
									<p class="text-#000000">7天</p>
								</div>
								<div class="flex items-center justify-between  mt-10px">
									<p>预计年化收益率</p>
									<p class="text-#000000">3.5%</p>
								</div>
								<div class="flex items-center justify-between  mt-10px">
									<p>预计到账收益</p>
									<p class="text-#07B175">
										0.00 USDT
									</p>
								</div>
							</div>
						</div>
						<div class="mt-20px">
							<el-button type="primary" color="#114CEE"
								style="width: 100%;height:50px;font-size:18px;"
								@click="showResultSubscribe = true">确认</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="产品规则" name="second">
					<div class="text-14px text-#000000 min-h-600px">
						<p>1.理财产品简介</p>
						<p>
							理财产品II—实时年化奖励适用于活期产品中的资产。实时年化收益奖励在申购后的下一分钟开始累计，并直接积累在您的理财钱包中。实时年化收益率可能每分钟变化。
						</p>
					</div>
				</el-tab-pane>
			</el-tabs>
		</template>
	</el-dialog>
	<AccountDeposit :show="showAccountDeposit" @close="closeAccountDeposit"></AccountDeposit>
	<ResultSubscribe :show="showResultSubscribe" @close="closeResultSubscribe"></ResultSubscribe>
</template>
<script lang="ts" setup>
import AccountDeposit from './AccountDeposit.vue';
import ResultSubscribe from './ResultSubscribe.vue';
interface IProps {
	show: false;
}
const showAccountDeposit = ref<boolean>(false);
const closeAccountDeposit = (val:boolean) => {
	showAccountDeposit.value = val;
};

const showResultSubscribe = ref<boolean>(false);
const closeResultSubscribe = (val:boolean) => {
	showResultSubscribe.value = val;
};
const props = defineProps<IProps>();

const emits = defineEmits(['close']);

const close = () => {
	emits('close',false);
};
const tabSelected = ref<any>('first');

// 期限
const termList = ref([
	{
		id: 1,
		timeDay: '7天',
		value: '1.90%'
	},
	{
		id: 2,
		timeDay: '30天',
		value: '1.90%'
	},
	{
		id: 3,
		timeDay: '30天',
		value: '1.90%'
	},
	{
		id: 4,
		timeDay: '30天',
		value: '1.90%'
	},
	{
		id: 5,
		timeDay: '30天',
		value: '1.90%'
	},
	{
		id: 6,
		timeDay: '30天',
		value: '1.90%'
	}
])

const termSelected = ref<any>(1);
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
	color: #86909C;
	font-size: 18px;
}

::v-deep .is-active {
	color: #000000;
}

::v-deep .el-tabs__nav-wrap:after {
	display: none;
}

::v-deep .el-input,
::v-deep .el-input__wrapper {
	border: none !important;
	box-shadow: none !important;
	font-size: 18px;
}
</style>
<style lang="scss">
	.step-financing-row{
		.el-step{
			.el-step__main{

			}
		}
		.el-step__icon{
			background-color: #114cee00;
		}
	}
</style>
